<template>
    <s-layout class="wallet-wrap" title="钱包">
      <!-- 钱包卡片 -->
      <view class="header-box ss-flex ss-row-center ss-col-center">
        <view class="card-box ui-BG-Main ui-Shadow-Main">
          <view class="card-head ss-flex ss-col-center">
            <view class="card-title ss-m-r-10">钱包余额（元）</view>
            <view
              @tap="state.showMoney = !state.showMoney"
              class="ss-eye-icon"
              :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
            ></view>
          </view>
          <view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
            <view class="money-num">{{
              state.showMoney ? money || 0 : "*****"
            }}</view>
          </view>
        </view>
      </view>
      <!-- 钱包记录 -->
      <view>
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view class="list" v-for="item in datalist" :key="item.id">
            {{ item.remark }}
            <span style="font-size: 24rpx; margin-left: 2rpx"
              >({{ item.opType == 1 ? "收入" : "支出" }})</span
            >
            <view style="display: flex; justify-content: space-between">
              <view style="font-size: 24rpx">{{ item.createTime }}</view>
              <view style="color: #ff6000"> 金额:{{ item.opType == 1 ? "+" : "-" }}{{ item.amount }}元 </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </s-layout>
  </template>
  
  <script setup>
  import { computed, watch, reactive, ref } from "vue";
  import { onLoad, onReachBottom } from "@dcloudio/uni-app";
  import sheep from "@/sheep";
  import dayjs from "dayjs";
  import _ from "lodash";
  
  const headerBg = sheep.$url.css("/static/img/shop/user/wallet_card_bg.png");
  
  const pagination = {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
    expense: 0,
    income: 0,
  };
  // 数据
  const state = reactive({
    showMoney: false,
    date: [],
    currentTab: 0,
    pagination,
    loadStatus: "",
    today: "",
  });
  
  const datalist = ref([]);
  
  const moneylist = async () => {
    const data = await sheep.$api.order.getUserBalanceRecord({
      pageNumber: 0,
      pageSize: 1,
      memberId:id.value
    });
    datalist.value = data.content;
    console.log(data, "我的值");
  };

  
  const status = ref(true);
  
  const lower = async () => {
    // if (status.value) {
    //   const data = await sheep.$api.order.getUserBalanceRecord({
    //     pageNumber: 0,
    //     pageSize: 1,
    //   });
    //   datalist.value.push(...data.content);
    // } else {
    //   status.value = false;
    //   uni.showToast({
    //     title: "已经到底了",
    //     icon: "none", // 不显示图标
    //     duration: 2000, // 提示的延迟时间，单位毫秒，默认为 1500
    //   });
    // }
  
    console.log("滚动到底部了");
  };
  
  const userInfo = computed(() => sheep.$store("user").userInfo);
  
  const id = ref(0)
  const money = ref(0)

  onLoad(async (options) => {
    console.log(options, "options");
    id.value = options.id;
    money.value = options.money;
    state.today = dayjs().format("YYYY-MM-DD");
    state.date = [state.today, state.today];
    moneylist();
  });
  </script>
  
  <style lang="scss" scoped>
  // 钱包
  .header-box {
    background-color: $white;
    padding: 30rpx;
  
    .card-box {
      width: 100%;
      min-height: 300rpx;
      padding: 40rpx;
      background-size: 100% 100%;
      border-radius: 30rpx;
      overflow: hidden;
      position: relative;
      z-index: 1;
      box-sizing: border-box;
  
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
        // background: v-bind(headerBg)
        // no-repeat;
        pointer-events: none;
      }
  
      .card-head {
        color: $white;
        font-size: 30rpx;
      }
  
      .ss-eye-icon {
        font-size: 40rpx;
        color: $white;
      }
  
      .money-num {
        font-size: 70rpx;
        line-height: 70rpx;
        font-weight: 500;
        color: $white;
        font-family: OPPOSANS;
      }
  
      .reduce-num {
        font-size: 26rpx;
        font-weight: 400;
        color: $white;
      }
  
      .topup-btn {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30px;
        font-size: 26rpx;
        font-weight: 500;
        background-color: $white;
        color: var(--ui-BG-Main);
      }
    }
  }
  
  // 筛选
  
  .filter-box {
    height: 114rpx;
    background-color: $bg-page;
  
    .total-box {
      font-size: 24rpx;
      font-weight: 500;
      color: $dark-9;
    }
  
    .date-btn {
      background-color: $white;
      line-height: 54rpx;
      border-radius: 27rpx;
      padding: 0 20rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: $dark-6;
  
      .ss-seldate-icon {
        font-size: 50rpx;
        color: $dark-9;
      }
    }
  }
  
  .tabs-box {
    background: $white;
    border-bottom: 2rpx solid #eeeeee;
  }
  
  // tab
  .wallet-tab-card {
    .tab-item {
      height: 80rpx;
      position: relative;
  
      .tab-title {
        font-size: 30rpx;
      }
  
      .cur-tab-title {
        font-weight: $font-weight-bold;
      }
  
      .tab-line {
        width: 60rpx;
        height: 6rpx;
        border-radius: 6rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 2rpx;
        background-color: var(--ui-BG-Main);
      }
    }
  }
  
  // 钱包记录
  .wallet-list {
    padding: 30rpx;
    background-color: #ffff;
  
    .head-img {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      background: $gray-c;
    }
  
    .list-content {
      justify-content: space-between;
      align-items: flex-start;
      flex: 1;
  
      .title {
        font-size: 28rpx;
        color: $dark-3;
        width: 400rpx;
      }
  
      .time {
        color: $gray-c;
        font-size: 22rpx;
      }
    }
  
    .money {
      font-size: 28rpx;
      font-weight: bold;
      font-family: OPPOSANS;
      .add {
        color: var(--ui-BG-Main);
      }
  
      .minus {
        color: $dark-3;
      }
    }
  }
  .list {
    width: 90%;
    margin: 20rpx auto;
    border-radius: 20rpx;
    background-color: #fff;
    height: 150rpx;
    line-height: 60rpx;
    font-weight: 700;
    box-sizing: border-box;
    padding: 20rpx;
  }
  .scroll-Y {
    height: 70vh;
    margin-top: 20rpx;
  }
  </style>
  